<template>
    <div>
        <div>
            <van-image width="100%" height="15rem" :src="imga" />
        </div>
        <van-notice-bar left-icon="volume-o"
            text="2023年10月8日起。“日出东方”客货班轮复航。每周三班，每周二，四，日由山东港口日照港出发，海上航行19小时，次日抵达韩国平泽港" />
        <van-nav-bar title="- 我要坐日出东方客货班轮去韩国 -" />
        <div id="map-container">
        </div>
        <!-- <van-cell-group>
            <van-field v-model="value1" label="日照市日照港国籍侯船厅" left-icon="location-o" right-icon="arrow" />
            <van-field v-model="value2" clearable label="0633-8388002" left-icon="phone-o" right-icon="arrow" />
            <van-field v-model="value2" clearable label="拨打电话资讯购票方式" left-icon="newspaper-o" />
        </van-cell-group> -->
        <van-cell is-link icon="location-o" title="日照市日照港国际侯船厅" />
        <van-cell is-link icon="phone-o" title="0633-8388002" @click="call">
            <a href="" v-show="false" ref="tels"></a>
        </van-cell>
        <van-cell is-link icon="coupon-o" title="拨打电话资讯购票方式" @click="call">
            <a href="" v-show="false" ref="tels"></a>
        </van-cell>
    </div>
</template>

<script>
    import AMapLoader from "@amap/amap-jsapi-loader"; // 按需引入依赖
    // import { on } from "events";
    window._AMapSecurityConfig = {
        securityJsCode: "5eb78774a5a49ee463cbe869ac27ac65", // 安全密钥
    };
    export default {
        data() {
            return {
                map: null,
                mouseTool: null,
                overlays: [],
                imga: require('@/assets/image/wycg.jpg'),
                auto: null,
                placeSearch: null,
                value1: "6.0km",
                value2: "",
            };
        },
        mounted() {
            this.initMap()
        },
        methods: {
            call() {
                this.$refs.tels.href = `tel://0633-8388002`
                this.$refs.tels.click()
            },
            // 初始化地图1
            initMap() {
                AMapLoader.load({
                        key: "88756b5c865be729aa02adbc0a1691ce", //key值是key值 和安全密钥不同
                        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation',
                            'AMap.MouseTool'
                        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                    })
                    .then((AMap) => {
                        // console.log(AMap)
                        // 初始化地图
                        this.map = new AMap.Map("map-container", {
                            viewMode: "2D", //  是否为3D地图模式
                            zoom: 18, // 初始化地图级别
                            center: [113.129972, 22.570318], //中心点坐标
                            // layers: [//使用多个图层
                            // new AMap.TileLayer.Satellite(),
                            // new AMap.TileLayer.RoadNet()
                            // ],
                            resizeEnable: true,
                        })
                        this.map.addControl(new AMap.Scale())
                        this.map.addControl(new AMap.ToolBar())
                        this.map.addControl(new AMap.HawkEye())
                        this.map.addControl(new AMap.MapType())
                        this.map.addControl(new AMap.Geolocation())
                        // this.mouseTool = new AMap.MouseTool(this.maps)
                        // this.mouseTool.on("draw", e => {
                        //   console.log('eeee-----',e)
                        //   this.drawObj = e.obj
                        //   var area = Math.round(AMap.GeometryUtil.ringArea(e.obj.getPath()))
                        //   var distance = Math.round(AMap.GeometryUtil.distanceOfLine(e.obj.getPath()))
                        //   this.$message.success("绘制完成")
                        //     console.log(e.obj.getPath().map(({ lng, lat }) => [lng, lat]))
                        // })
                    })
                    .catch((e) => {
                        console.log(e);
                    });
            },

            // 初始化地图2
            initMap() {
                AMapLoader.load({
                        "key": "88756b5c865be729aa02adbc0a1691ce", // 申请好的Web端开发者Key，首次调用 load 时必填
                        "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                        "plugins": ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", "AMap.MouseTool",
                            "AMap.MapType", "AMap.HawkEye"
                        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                    })
                    .then((AMap) => {
                        this.map = new AMap.Map('map-container', {
                            viewMode: "2D", //  是否为3D地图模式
                            zoom: 17, // 初始化地图级别
                            center: [119.53397, 35.37897], //中心点坐标  郑州
                            resizeEnable: true
                        });
                        // 添加左下角的比例尺
                        this.map.addControl(new AMap.Scale());
                        let toolBar = new AMap.ToolBar({
                            position: {
                                bottom: '210px',
                                right: '35px'
                            }
                        });
                        let controlBar = new AMap.ControlBar({
                            position: {
                                bottom: '280px',
                                right: '10px',
                            },
                        });
                        // 鼠标点击获取经纬度
                        this.map.on('click', function (e) {
                            console.log('e---', e)
                            console.log('e.lnglat---', e.lnglat)
                            console.log("经度", e.lnglat.getLng())
                            console.log("纬度", e.lnglat.getLat())
                            console.log(e.address);

                        });
                        // 地图上绘制点位
                        this.mouseTool = new AMap.MouseTool(this.map);
                        // 监听draw事件可获取画好的覆盖物
                        this.mouseTool.on('draw', function (e) {
                            console.log('获取画好的覆盖物', e)
                            this.overlays.push(e.obj);
                        }.bind(this))
                        // this.map.addControl(toolBar); // 添加右下角的放大缩小
                        // this.map.addControl(controlBar); // 方向盘
                        // this.map.addControl(new AMap.MapType()); // 添加右上角的标准图和卫星图  和路况
                        // this.map.addControl(new AMap.HawkEye()); // 添加地图放大镜
                    }).catch(e => {
                        console.log(e);
                    });
            },
            // 具体画图代码
            draw(type) {
                switch (type) {
                    case 'marker': {
                        this.mouseTool.marker({
                            //同Marker的Option设置
                        });
                        break;
                    }
                    case 'polyline': {
                        this.mouseTool.polyline({
                            strokeColor: '#80d8ff'
                            //同Polyline的Option设置
                        });
                        break;
                    }
                    case 'polygon': {
                        this.mouseTool.polygon({
                            fillColor: '#00b0ff',
                            strokeColor: '#80d8ff'
                            //同Polygon的Option设置
                        });
                        break;
                    }
                    case 'rectangle': {
                        this.mouseTool.rectangle({
                            fillColor: '#00b0ff',
                            strokeColor: '#80d8ff'
                            //同Polygon的Option设置
                        });
                        break;
                    }
                    case 'circle': {
                        this.mouseTool.circle({
                            fillColor: '#00b0ff',
                            strokeColor: '#80d8ff'
                            //同Circle的Option设置
                        });
                        break;
                    }
                }

            }
        }
    }
</script>

<style scoped lang="less">
    #map-container {
        overflow: hidden;
        margin: 0 auto !important;
        width: 90%;
        height: 300px;
        margin: 0;
    }

    .amap-controlbar,
    .amap-controlbar * {
        display: none;
    }

    .amap-toolbar,
    .amap-ctrl-list-layer {
        display: none;
    }

    .van-notice-bar {
        background-color: rgb(255, 255, 255);
    }

    .van-field__label {
        width: 100% !important;
    }
</style>